<template>
  <div>
    <video src="@/assets/media/video.3cf57b17.mp4" loop muted autoplay />

    <div class="login-container">
      <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" auto-complete="on" label-position="left">

        <div class="title-container">
          <img src="@/assets/common/logo1.33ef7fa0.png" alt="" srcset="">
        </div>

        <el-form-item prop="account">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input
            ref="account"
            v-model="loginForm.account"
            placeholder="用户名"
            type="text"
          />
        </el-form-item>

        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            ref="password"
            v-model="loginForm.password"
            placeholder="密码"
            show-password
          />

        </el-form-item>

        <el-form-item prop="code">
          <span class="svg-container">
            <svg-icon icon-class="example" />
          </span>
          <el-input
            ref="code"
            v-model="loginForm.code"
            placeholder="验证码"
            type="text"
          />
          <span @click="captchaImg">
            <img class="captcha-img" :src="urlImg" alt="" srcset="">
          </span>
        </el-form-item>

        <el-button type="primary" class="btn" @click="loginBtn">登录</el-button>

      </el-form>
    </div>
  </div>
</template>

<script>
import { captchaAPI } from '@/api/user'
import { mapActions } from 'vuex'

export default {
  name: 'Login',
  data() {
    return {
      urlImg: '',
      loginForm: {
        account: 'demo',
        password: 'hm#qd@23!',
        code: '',
        key: '',
        tenant: '0000',
        bindAccount: '',
        bindPassword: '',
        signAccount: '',
        signPassword: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '至少 6 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.captchaImg()
  },
  methods: {
    ...mapActions('user', ['loginActions']),
    // 获取验证码
    async captchaImg() {
      // 时间戳
      const key = Date.now()
      this.loginForm.key = key
      const res = await captchaAPI(key)
      // 把 blob 格式转换为图片地址
      this.urlImg = window.URL.createObjectURL(res.data)
      console.log(this.urlImg)
    },
    // 登录按钮
    async loginBtn() {
      this.$refs.loginForm.validate()

      this.loginActions(this.loginForm)
      // 点击登录按钮后：如果失败页面就不会跳转，刷新一下验证码图片
      setTimeout(() => {
        this.captchaImg()
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg:#283443;
$light_gray:#fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      // color: $light_gray;
      color: #606266;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(174, 172, 172, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;

  .login-form {
    background-color: #fff;
    border-radius :10px;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 450px;
    height: 490px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    // position: relative;

    img{
      position: absolute;
      top: 8%;
      left: 50%;
      transform: translateX(-50%);
      height: 54px;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
video {
  // 固定定位
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // 图片撑满整个容器
  object-fit: fill;
}
.btn{
  width:100%;
  margin-bottom:30px;
  background-color: #e15536;
  height: 54px;
  font-size: 18px;
  font-weight: 700;
  border: 0 solid ;
}
.captcha-img{
  cursor: pointer;
  position: absolute;
  top: 9px;
  right: 10px;
  width: 72px;
  height: 32px;
}
</style>
